<template>
  <aside class="app-sidebar" :class="{ collapsed }">
    <el-menu
      :default-active="activeMenu"
      class="el-menu-vertical-demo"
      :collapse="collapsed"
      :router="true"
      background-color="#fff"
      text-color="#303133"
      active-text-color="var(--theme-color)"
      unique-opened
      :default-openeds="[route.matched[1]?.path || '/operation']"
    >
      <template v-for="item in menu">
        <el-sub-menu v-if="item.children" :index="item.path" :key="`sub-${item.path}`">
          <template #title>
            <el-icon v-if="item.icon"><component :is="item.icon" /></el-icon>
            <span>{{ item.title }}</span>
          </template>
          <el-menu-item v-for="sub in item.children" :index="sub.path" :key="`menu-${sub.path}`">
            <span>{{ sub.title }}</span>
            <el-tag v-if="sub.tag" size="small" :type="sub.tagType || 'info'" style="margin-left: 8px;">
              {{ sub.tag }}
            </el-tag>
          </el-menu-item>
        </el-sub-menu>
        <el-menu-item v-else :index="item.path" :key="`menu-${item.path}`">
          <el-icon v-if="item.icon"><component :is="item.icon" /></el-icon>
          <span>{{ item.title }}</span>
        </el-menu-item>
      </template>
    </el-menu>
    <div class="sidebar-toggle" @click="collapsed = !collapsed">
      <el-icon><component :is="collapsed ? 'Expand' : 'Fold'" /></el-icon>
    </div>
  </aside>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRoute } from 'vue-router'
import {
  HomeFilled, DataLine, DocumentCopy, GoodsFilled, User, List, Box, OfficeBuilding, Promotion, EditPen, Service, WalletFilled, PieChart, Setting, DocumentChecked, Expand, Fold
} from '@element-plus/icons-vue'

const collapsed = ref(false)
const route = useRoute()
const activeMenu = computed(() => route.path)

// 定义菜单项类型
interface MenuItem {
  title: string
  icon?: any
  path: string
  children?: MenuItem[]
  tag?: string
  tagType?: 'success' | 'warning' | 'danger' | 'info'
}

const menu: MenuItem[] = [
  { title: '工作台', icon: HomeFilled, path: '/' },
  {
    title: '数据看板', icon: DataLine, path: '/data-board', children: [
      { title: '文案数据', icon: DocumentCopy, path: '/data-board/copywriting-data' },
      { title: '商品数据', icon: GoodsFilled, path: '/data-board/goods' },
      { title: '会员数据', icon: User, path: '/data-board/member-data' },
      { title: '积分数据', icon: WalletFilled, path: '/data-board/points-data' },
      { title: '优惠券数据', icon: Promotion, path: '/data-board/coupon-data' },
      { title: '仓储数据', icon: OfficeBuilding, path: '/data-board/warehouse-data' },
      { title: '客服数据', icon: Service, path: '/data-board/service-data' },
      { title: '商品推荐数据', path: '/data-board/recommend' }
    ]
  },
  {
    title: '会员管理', icon: User, path: '/member', children: [
      { title: '会员管理', path: '/member/list' },
      { title: '会员等级管理', path: '/member/level' },
      { title: '会员标签管理', path: '/member/tag' }
    ]
  },
  { title: '订单管理', icon: List, path: '/order', children: [
    ]
  },
  { title: '商品管理', icon: Box, path: '/product', children: [
      { title: '商品管理', path: '/product/list' },
      { title: '商品审核', path: '/product/audit' },
                      { title: '全站分类管理', path: '/product/category' },
        { title: '分站分类管理', path: '/product/site-category' },
        { title: '平台分类管理', path: '/product/platform-category' },
      { title: '商品标签', path: '/product/tag' },
      { title: '平台映射', path: '/product/platform-mapping' },
      { title: '商品推荐管理', path: '/product/recommend'}
    ]
  },
  { title: '仓储中心', icon: OfficeBuilding, path: '/warehouse', children: [
      { title: '库位管理', path: '/warehouse/location' },
      { title: '仓库盘点', path: '/warehouse/inventory' }
    ]
  },
  { title: '运营管理', icon: Promotion, path: '/operation', children: [
      { title: '文案管理(后期开发)', icon: EditPen, path: '/operation/copywriting-manage' },
      { title: 'Banner 广告位管理', path: '/operation/banner' },
      { title: '领券中心管理', path: '/operation/coupon-center' },
      { title: '我的信件', path: '/operation/notification' },
      { title: '优惠券管理', path: '/operation/coupon' },
      { title: '优惠券领取情况', path: '/operation/coupon-receive' },
      // { title: '首页装修', path: '/operation/home-design' },
      { title:'系统公告', path:'/operation/announcement-manage'},
      { title: '站点弹窗管理', path: '/operation/site-popup', tag: '弹窗' }
    ]
  },
  { title: '积分管理', icon: Box, path: '/operation/points', children: [
    { title: '日常任务管理', path: '/operation/points/task' },
    { title: '营销活动管理', path: '/operation/points/activity' },
    { title: '积分配置', path: '/operation/points/config' },
    { title: '积分日志', path: '/operation/points/log' },
    { title: '积分签到', path: '/operation/points/signin-rule' },
    // { title: '积分订单', path: '/operation/points/order' },
    // { title: '积分商品', path: '/operation/points/goods' },
    { title: '用户积分管理', path: '/operation/points/user-manage' },
    // { title: '风控管理', path: '/operation/points/risk-control' }
  ] },
  { title: '客服中心(接入第三方)', icon: Service, path: '/service', children: [
    { title: '会话管理', path: '/service/session' },
    { title: '工单管理', path: '/service/ticket' },
    { title: '客服管理', path: '/service/staff' },
    { title: '离职继承', path: '/service/handover' },
    { title: '客服满意度评价', path: '/service/satisfaction' },
    { title: '客服排班管理', path: '/service/scheduling' },
    { title: '知识库管理', path: '/service/knowledge',
      children: [
        { title: '内容管理', path: '/service/knowledge' },
        { title: '分类管理', path: '/service/knowledge-category' },
        { title: '标签管理', path: '/service/knowledge-tag' },
        { title: '统计分析', path: '/service/knowledge-stat' }
      ]
    },
    { title: '快捷回复管理', path: '/service/quick-reply' },
    { title: '会话标签管理', path: '/service/tag' },
    { title: '客服绩效统计', path: '/service/performance' },
    { title: '机器人客服', path: '/service/robot' }
  ] },
  { title: '财务管理', icon: WalletFilled, path: '/finance', children: [
      { title: '财务凭证管理', path: '/finance/voucher' }
    ]
  },
  { title: '报表中心', icon: PieChart, path: '/report' },
  { title: '基础设置', icon: Setting, path: '/settings', children: [
      { title: '员工管理', path: '/settings/staff' },
      { title: '角色管理', path: '/settings/role' },
      { title: '站点管理', path: '/settings/site' },
      { title: '数据字典', path: '/settings/dictionary' },
      { title: '账号管理', path: '/settings/account' },
      { title: '收费管理', path: '/settings/extra-service' },
      { title: '附加服务', path: '/settings/additional-service' },
      { title: '国际物流运费规则', path: '/settings/freight-rule' },
      // { title: '工作流配置', path: '/settings/workflow' },
      { title: '卖家管理', path: '/settings/seller' },
      { title: '包裹设置', path: '/settings/package' },
      { title: '汇率管理', path: '/settings/exchange' },
      { title: '推送方式管理', path: '/settings/push-method' },
      { title: '多语言管理', path: '/settings/language' }
    ]
  },
  { title: '操作日志', icon: DocumentChecked, path: '/log' }
]
</script>

<style scoped>
.app-sidebar {
  position: fixed;
  top: var(--header-height);
  left: 0;
  width: var(--sidebar-width);
  height: calc(100vh - var(--header-height));
  background: #fff;
  z-index: 90;
  box-shadow: 1px 0 8px 0 rgba(0,0,0,0.03);
  overflow-y: auto;
  transition: width 0.2s;
  display: flex;
  flex-direction: column;
}
.app-sidebar.collapsed {
  width: 60px;
}
.el-menu {
  border-right: none;
  flex: 1;
}
.sidebar-toggle {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-top: 1px solid #f0f0f0;
}
</style>
